import React from 'react';

const FeatureSection: React.FC = () => {
  const features = [
    {
      title: "网络请求捕获",
      description: "使用chrome.webRequest API捕获页面的所有网络请求，包括XHR、Fetch等"
    },
    {
      title: "请求详情查看",
      description: "在DevTools面板或独立页面中查看请求的详细信息，包括请求头、响应头、请求体等"
    },
    {
      title: "请求重发",
      description: "支持重新发送已捕获的请求，方便调试和测试API接口"
    },
    {
      title: "过滤与搜索",
      description: "支持按标签页过滤、按类型/状态搜索与筛选，快速定位目标请求"
    },
    {
      title: "内存优化",
      description: "异步存储请求到chrome.storage.local，并包含自动清理与内存优化策略"
    },
    {
      title: "多页面支持",
      description: "插件包含popup、options、devtools页面以及content script与background service worker"
    }
  ];

  return (
    <section className="py-16 bg-gray-800">
      <div className="container mx-auto px-4">
        <h2 className="text-3xl md:text-4xl font-bold text-center mb-12">主要特性</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {features.map((feature, index) => (
            <div 
              key={index} 
              className="bg-gray-700 rounded-lg p-6 hover:bg-gray-600 transition duration-300"
            >
              <h3 className="text-xl font-bold mb-3 text-blue-400">{feature.title}</h3>
              <p className="text-gray-300">{feature.description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default FeatureSection;